<template>
	<div class="padding-top padding-right text-white">
		<!-- 中包信息 -->
		<pol-title title="中包信息"></pol-title>
		<div class="border-solid bg-tm radius-sm padding-lg padding-top">
			<div class="flex align-center margin-top-lg">
				<div class="flex-sub">
					<div class="text-white2">计划浇次号</div>
					<div class="text-xl text-bold margin-top-sm">013118</div>
				</div>
				<div class="flex-sub">
					<div class="text-white2">实际浇次号</div>
					<div class="text-xl text-bold margin-top-sm">20220211</div>
				</div>
				<div class="" style="flex: 0 0 130px">
					<div class="text-white2">连浇炉数</div>
					<div class="text-xl text-bold margin-top-sm">6</div>
				</div>
			</div>
			<div class="flex align-center margin-top-lg">
				<div class="flex-sub">
					<div class="text-white2">开始时刻</div>
					<div class="text-xl text-bold margin-top-sm">2022-08-23</div>
				</div>
				<div class="flex-sub">
					<div class="text-white2">时长（h）</div>
					<div class="text-xl text-bold margin-top-sm">4.4</div>
				</div>
				<div class="" style="flex: 0 0 130px"></div>
			</div>
		</div>

		<!-- 质量事件列表 -->
		<pol-title title="质量事件列表" class="margin-top"></pol-title>
		<div class="margin-top">
			<!-- 表格 -->
			<pol-table ref="polTableRef" v-bind="tableOpt" height="280px">
				<template #ItemCode="{ row }">
					<span class="text-green2">{{row.ItemCode}}</span>
				</template>
				<template #ItemName="{ row }">
					<span class="text-green2">{{row.ItemName}}</span>
				</template>
				<template #ItemValue="{ row }">
					<span class="text-green2">{{row.ItemValue}}</span>
				</template>
				<template #IsDefault="{ row }">
					<span class="text-green2">{{row.IsDefault}}</span>
				</template>
				<template #P_IsSys="{ row }">
					<span class="text-green2">{{row.P_IsSys}}</span>
				</template>
			</pol-table>
		</div>

		<div class="flex justify-center margin-top-xl">
			<el-checkbox v-model="checked1" size="large">
				<template #default>
					<span class="text-white text-lg">发生中</span>
				</template>
			</el-checkbox>
			<el-checkbox v-model="checked2" size="large">
				<template #default>
					<span class="text-white text-lg">停止</span>
				</template>
			</el-checkbox>
			<el-button type="primary" class="btn-bg-blue btn-box margin-left-xxl" size="large" @click="handEve" style="position: relative; z-index: 1;">手动质量事件</el-button>
		</div>

		<el-dialog v-model="dialogHanPopup" title="QES手动质量事件" width="1000" center align-center>
			<div class="padding">
				<div class="text-lg text-black">
					QES手动质量事件
				</div>
				<div class="flex align-start margin-top-xl">
					<div class="flex-sub flex justify-center">
						<div>
							<div class="text-blue margin-top text-lg">钢包质量事件</div>
							<div><el-button type="primary" class="btn-bg-blue hand-btn-box margin-top-lg" size="large">大包烧氧</el-button></div>
							<div><el-button type="primary" class="btn-bg-blue hand-btn-box margin-top-lg" size="large">大包下渣</el-button></div>
							<div><el-button type="primary" class="btn-bg-blue hand-btn-box margin-top-lg" size="large">大包敞开浇铸</el-button></div>
						</div>
					</div>
					
					<div class="flex-sub flex justify-center solid-right-h">
						<div>
							<div class="text-blue margin-top text-lg">中包质量事件</div>
							<div class="margin-top-lg">
								<el-select v-model="value" placeholder="Select" size="large" style="width: 140px">
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</div>
							<div><el-button type="primary" class="btn-bg-blue hand-btn-box margin-top-lg" size="large">中包钢水过少</el-button></div>
							<div><el-button disabled class="hand-btn-box margin-top-lg" size="large">中包放渣</el-button></div>
							<div><el-button disabled class="hand-btn-box margin-top-lg" size="large">热换中包</el-button></div>
						</div>
					</div>
					
					<div class="flex-sub flex justify-center">
						<div>
							<div class="text-blue margin-top text-lg">铸流质量事件</div>
							<div class="margin-top-lg">
								<el-select v-model="value" placeholder="Select" size="large" style="width: 140px">
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</div>
							<div><el-button type="primary" class="btn-bg-blue hand-btn-box margin-top-lg" size="large">换水口</el-button></div>
							<div><el-button type="primary" class="btn-bg-blue hand-btn-box margin-top-lg" size="large">结晶器偏流</el-button></div>
							<div><el-button type="primary" class="btn-bg-blue hand-btn-box margin-top-lg" size="large">结晶器翻花</el-button></div>
							<div><el-button type="primary" class="btn-bg-blue hand-btn-box margin-top-lg" size="large">浸入式水口异常</el-button></div>
							<div><el-button disabled class="hand-btn-box margin-top-lg" size="large">备份1</el-button></div>
							<div><el-button disabled class="hand-btn-box margin-top-lg" size="large">备份1</el-button></div>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import { ref } from 'vue';

	const checked1 = ref(true)
	const checked2 = ref(true)

	//表格配置
	const columns = ref([
		{ label: '质量事件名称', key: 'ItemCode', align: 'left', slot: true},
		{ label: '铸流编号', key: 'ItemName', align: 'center', width: '70', slot: true },
		{ label: '开始时刻', key: 'ItemValue', align: 'center', width: '160', slot: true },
		{ label: '长度(m)', key: 'IsDefault', align: 'center', width: '60', slot: true },
		{ label: '时长(min)', key: 'P_IsSys', align: 'center', slot: true },
	]);

	//表格配置
	const tableOpt = ref({
		size: 'small',
		columns: columns.value,
		localData: [{
				ItemCode: '液位波动过大',
				ItemName: '1',
				ItemValue: '2022.08.23 16:45',
				IsDefault: '6',
				P_IsSys: '25',
			},
			{
				ItemCode: '液位波动过大',
				ItemName: '2',
				ItemValue: '2022.08.23 16:45',
				IsDefault: '6',
				P_IsSys: '25',
			}, {
				ItemCode: '液位波动过大',
				ItemName: '3',
				ItemValue: '2022.08.23 16:45',
				IsDefault: '6',
				P_IsSys: '25',
			}, {
				ItemCode: '液位波动过大',
				ItemName: '4',
				ItemValue: '2022.08.23 16:45',
				IsDefault: '6',
				P_IsSys: '25',
			}, {
				ItemCode: '液位波动过大',
				ItemName: '5',
				ItemValue: '2022.08.23 16:45',
				IsDefault: '6',
				P_IsSys: '25',
			},
			{
				ItemCode: '液位波动过大',
				ItemName: '6',
				ItemValue: '2022.08.23 16:45',
				IsDefault: '6',
				P_IsSys: '25',
			},
			{
				ItemCode: '液位波动过大',
				ItemName: '7',
				ItemValue: '2022.08.23 16:45',
				IsDefault: '6',
				P_IsSys: '25',
			},
			{
				ItemCode: '液位波动过大',
				ItemName: '7',
				ItemValue: '2022.08.23 16:45',
				IsDefault: '6',
				P_IsSys: '25',
			},
		]
	});

	//手动按钮事件
	const dialogHanPopup = ref(false)
	const handEve = () => {
		dialogHanPopup.value = true
	}
	
	const value = ref('32')
	
	const options = [{
		value: '32',
		label: '32',
	}, ]
</script>

<style lang="scss" scoped>
	.hand-btn-box{
		width: 140px;
		text-align: center;
	}
	
	.solid-right-h{
		border-left: 1px solid #e1e1e1;
		border-right: 1px solid #e1e1e1;
	}
	
	.solid-right-l{
		border-left: 1px solid #e1e1e1;
	}
</style>